import {FC,useState,useEffect} from 'react'

const Effect2th = () => {
    let [data,setData] = useState<Array<any>>([])
    let [flag,setFlag] = useState<boolean>(false)
    // 异步请求属于副作用
    // useEffect的第二个参数叫做依赖项
    // 在第二个参数添加空数组/空依赖，那么可以当成commentDidMount来使用，防止死循环
    useEffect(()=>{
        fetch('http://chst.vip/data/index.json')
        .then(body=>body.json())
        .then(res=>{
            // console.log(res);
            setData(res.data)
        })
    // },[])
    },[flag]) // flag发生变化，useEffect中的回调函数就会重新执行

    // 不同的负效应逻辑不应该只放在一个effect，应该放到多个effect
    useEffect(()=>{
        document.getElementById('D')!.style.color = 'deepskyblue';
    },[])

    let lis = data.map((item:any) => {
        return(
            <li key={item.id}>{item.title}</li>
        )
    })

    const handleClick = () => {
        setFlag(!flag)
    }
    return(
        <fieldset>
            <legend id='D'>effect第二个参数</legend>
            <ul>
                {lis}
            </ul>
            <button onClick={handleClick}>重新发送请求</button>
        </fieldset>
    )
}
export default Effect2th